<template>
  <el-card class="ml-3 mr-3">
    <div style="margin-bottom: 20px; display: flex; align-items: center">
      <!-- <img src="@/assets/images/ooda1.png" alt="ooda logo" style="height:52px; display:inline;"> -->
      <img src="@/assets/images/zycx2.png" style="height: 80px;margin-top: 10px;">
      <h1 style="font-size: 50px; display:inline; margin-left: 10px">基于GD32的工业无线物联网传感系统</h1>
    </div>
    <div class="h-1/2">
    <el-carousel :interval="5000" type="card" class="flex justify-center flex-col" style="height:100%;margin-bottom: 30px;">
      <el-carousel-item v-for="(item, index) in images" :key="index" style="height: 100%">
        <img :src="item.url" class="rounded-md drop-shadow-2xl" style="height:100%;width: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
  <el-card class="mb-3">
    <div style="text-indent: 2em;">
    <p>
      工业物联网系统是一种基于互联网和物联网技术的智能化系统，涉及环境检测，数据通信，设备控制等。过传感器和数据采集设备，实时监测实际工业生产过程中的温度、湿度和烟雾浓度等关键参数，确保它们保持在安全范围内。因此，我们团队从此背景出发，设计了一种基于兆易创新GD32系列芯片的智能化工业物联网传感系统，以满足工厂在特殊环境下的监测与应用需求。
    </p>
    <p>
      本系统采用先进的云计算技术，能够实现多节点数据的实时采集、传输和处理，并将各节点数据通过终端G和前后端进行可视化和分析，辅助管理者进行生产决策，同时，配备无线智能小车，能够根据异常节点的警报信息自动前往现场进行拍摄和监测，实现智能化的环境监测和预警。
    </p>
    <p>
      本系统包括工厂节点、工厂终端、云端前后端界面、智能车等模块。工厂节点是系统的核心部分，包括传感器、数据采集模块、控制器等组件，用于实时监测环境参数并控制设备的运行状态。工厂终端是系统的操作界面，用于实时显示环境参数的数据和警报信息，并支持用户对设备进行控制和配置。云端前后端界面用于数据的存储、处理和分析，并将结果返回给工厂终端和智能小车。智能小车是系统的重要组成部分，它能够根据警报信息自动前往现场进行拍摄和监测。
    </p>
    <p>
      本系统采用了高度自动化和智能化的设计，能够快速响应异常情况，并采取相应的措施，保障了工厂生产的稳定性和安全性。同时，系统还具备高度的安全性和可靠性，通过数据加密、备份和恢复等保障措施，保护系统的数据和设备安全，并通过硬件和软件的优化，提高系统的稳定性和可靠性，以确保系统长期稳定运行。
    </p>      
    </div>
  </el-card>
    <div class="grid lg:grid-cols-12 md:grid-cols-6 sm:grid-cols-3 gap-7">
      <router-link :to="'/modelone/11'" class="col-span-4">
      <div class="col-span-4">
        <el-card
          class="border-white"
          :body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
        >
          <div class="flex flex-wrap cursor-pointer">
            <div class="basis-0 grow">
              <div class="card-header">
                <h5 class="font-semibold text-0.8125 text-muted mb-0">·</h5>
              </div>
              <h2 class="text-xl textindigo-210 font-semibold mb-0 leading-7.5">节点一</h2>
            </div>
            <div
              class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#f5365c] to-[#f56036]"
            >
              <font-awesome-icon :icon="['fas', 'hand-point-up']" size="lg" />
            </div>
          </div>
          <p class="mt-4 mb-0 text-sm">
            <span class="text-success mr-1">●</span>
            <span class="whitespace-nowrap text-normal">Node One</span>
          </p>
        </el-card>
      </div>
      </router-link>
      <router-link :to="'/modeltwo/21'" class="col-span-4">
      <div class="col-span-4">
        <el-card
          class="border-white"
          :body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
        >
          <div class="flex flex-wrap cursor-pointer">
            <div class="basis-0 grow">
              <div class="card-header">
                <h5 class="font-semibold text-0.8125 text-muted mb-0">·</h5>
              </div>
              <h2 class="text-xl textindigo-210 font-semibold mb-0 leading-7.5">节点2</h2>
            </div>
            <div
              class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#fb6340] to-[#fbb140]"
            >
              <font-awesome-icon :icon="['fas', 'chart-pie']" size="lg" />
            </div>
          </div>
          <p class="mt-4 mb-0 text-sm">
            <span class="text-success mr-1">●</span>
            <span class="whitespace-nowrap text-normal">Node Two</span>
          </p>
        </el-card>
      </div>
      </router-link>
      <router-link :to="'/real/31'" class="col-span-4">
      <div class="col-span-4">
        <el-card
          class="border-white"
          :body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
        >
          <div class="flex flex-wrap cursor-pointer">
            <div class="basis-0 grow">
              <div class="card-header">
                <h5 class="font-semibold text-0.8125 text-muted mb-0">·</h5>
              </div>
              <h2 class="text-xl textindigo-210 font-semibold mb-0 leading-7.5">历史数据</h2>
            </div>

            <div
              class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
            >
              <font-awesome-icon :icon="['fas', 'coins']" size="lg" />
            </div>
          </div>
          <p class="mt-4 mb-0 text-sm">
            <span class="text-success mr-1">●</span>
            <span class="whitespace-nowrap text-normal">History Data</span>
          </p>
        </el-card>
      </div>
      </router-link>
    </div>
    <!-- <div class="h-1/2 mt-12">
    <el-carousel :interval="5000" type="card" class="flex justify-center flex-col" style="height:100%;margin-bottom: 30px;">
      <el-carousel-item v-for="(item, index) in images" :key="index" style="height: 100%">
        <img :src="item.url" class="rounded-md drop-shadow-2xl" style="height:100%;width: 100%">
      </el-carousel-item>
    </el-carousel>
    </div> -->
  </el-card>

</template>

<script>
import axios from 'axios';
import { onMounted, ref } from 'vue'

// const nodeOneDataStr = localStorage.getItem('nodeOneData')
// const nodeOneData = nodeOneDataStr ? JSON.parse(nodeOneDataStr) : []
const nodeOneData = []
const nodeTwoData = []

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      images: [
        { url: 'assets/images/img1.jpg' },
        { url: 'assets/images/img2.jpg' },
        { url: 'assets/images/img3.png' },
        { url: 'assets/images/img4.jpeg' },
        { url: 'assets/images/img5.png' },
        { url: 'assets/images/img6.png' },
      ],
    };
  },
  methods: {
    goToAnotherPage(route) {
      // 使用Vue.js路由功能导航到另一个页面
      this.$router.push(route);
    },
    auto(){
      this.intervalId1 = setInterval(() => {
        axios.get('http://127.0.0.1:8000/data').then((res) => {
          console.log('节点一数据', res.data)
          nodeOneData.push(res.data) // 将获取到的数据添加到数组中
          localStorage.setItem('nodeOneData1', JSON.stringify(nodeOneData)) // 存储所有数据到本地存储
        });
      }, 1000)
    },
    auto2(){
      this.intervalId1 = setInterval(() => {
        axios.get('http://127.0.0.1:8000/data2').then((res) => {
          console.log('节点二数据', res.data)
          nodeTwoData.push(res.data) // 将获取到的数据添加到数组中
          localStorage.setItem('nodeTwoData2', JSON.stringify(nodeTwoData)) // 存储所有数据到本地存储
        });
      }, 1000)
    }
  },
  mounted() {
    this.auto();
    this.auto2();
  },
};
</script>

<style scoped>
.el-carousel__container {
  height: 350px;
}
::v-deep(.el-carousel__mask){
  background-color: rgba(0, 0, 0) !important;
  z-index:1;
  opacity:0.5;
}
</style>
